<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <section id="wrap">
      <h2 class="title">百度音乐榜单</h2>
      <ul id="list"></ul>
      <footer class="footer">
        <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      </footer>
    </section>
    <script>
      var data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: true,
        },
        {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false,
        },
        {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: true,
          collect: true,
        },
        {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false,
        },
        {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: false,
          collect: false, //是否收藏 true 收藏 false 没有收藏
        },
      ];
      var ulEle = document.querySelector("ul");
      var liEle = document.createElement("li");
      //数据驱动函数
      renderDom(data);
      function renderDom(data) {
        //获取ul元素
        var ulEle = document.querySelector("ul");
        ulEle.innerHTML = "";
        //循环data数组
        data.forEach((item, key) => {
          //创建li元素
          let liEle = document.createElement("li");

          //在li里加入input框
          liEle.innerHTML = ` <input type="checkbox"${
            item.checked ? "checked" : ""
          } /><span>${
            item.title
          }</span> <a href="javascript:;" class="collect">${
            item.collect ? "收藏" : "取消收藏"
          }</a> <a href="javascript:;" class="remove">删除</a>`;

          liEle.onclick = (e) => {
            var target = e.target;
            if (target.nodeName === "INPUT") {
              data[key].checked = target.checked;
              // console.log("点击了checkbox", data);
              var ischeckall = data.every((item) => {
                return item.checked;
              });
              // console.log("ischeckall", ischeckall);
              document.querySelector("#checkAll").checked = ischeckall;
            }
          };
          //把创建的li元素加到ul里
          ulEle.appendChild(liEle);
          // console.log(item.collect);
          // console.log(item.checked);
          // arr.push(item.collect);

          // 点击全选按钮
          var buttonEle = document.querySelector("#checkAll");
          buttonEle.onclick = (a) => {
            var target = a.target;
            if (target.checked) {
              data.forEach((item) => {
                item.checked = true;
                renderDom(data);
              });
            } else {
              data.forEach((item) => {
                item.checked = false;
                renderDom(data);
              });
            }
          };
        });

        //设置删除按钮点击事件
        var delBtn = document.querySelectorAll(".remove");
        // console.log(delBtn);
        delBtn.forEach((e, k) => {
          e.onclick = (e) => {
            e.target.parentElement.remove();
            console.log(k);
            data.splice(k, 1);
            console.log(data);
            renderDom(data);
          };
        });

        // 点击收藏事件
        var scEle = document.querySelectorAll(".collect");
        console.log(scEle);
        scEle.forEach(function (item, key) {
          item.onclick = () => {
            data[key].collect = !data[key].collect;
            renderDom(data);
          };
        });
      }
    </script>
  </body>
</html>
